import React,{useState,useEffect} from 'react'
import { Select, Space,DatePicker,Input } from 'antd';
import $axios from '../utils/axios';
import '../page/Contract/contractStyle.less'
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs'

const { Search } = Input;

const { RangePicker } = DatePicker;
const onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[]) => {
  if (dates) {
    console.log('开始时间: ', dates[0], ', 结束时间: ', dates[1]);
    console.log('开始时间: ', dateStrings[0], ', 结束时间: ', dateStrings[1]);
  } else {
    console.log('Clear');
  }
};

const rangePresets: {
  label: string;
  value: [Dayjs, Dayjs];
}[] = [
  { label: '最近一周', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: '最近一个月', value: [dayjs().add(-30, 'd'), dayjs()] },
  { label: '最近三个月', value: [dayjs().add(-90, 'd'), dayjs()] },
];
export default function SearchBar() {
    const user:any = sessionStorage.getItem('logindata')
    const userId = JSON.parse(user)
    const [AllChcsOrgan,setAllChcsOrgan] = useState<any[]>([])  //所有机构信息
    const [AllChcsService,setAllChcsService] = useState<any[]>([])   //所有服务包数据
    const [doctorTeam,setDoctorTeam] = useState()
  //签约状态
  const data = [
    { value: '0', label: '待审核' },
    { value: '1', label: '待支付' },
    { value: '3', label: '已驳回' },
  ]
  //获取机构信息
  const getAllChcsOrgan = ()=>{
    $axios({
      url:'/api/getAllChcsOrgan',
      method:'post',
    }).then((res)=>{
      // console.log(res.data.rows)
      const data = res.data.rows.map((item:any)=>{
        return {value:item.id,label:item.name} 
      })
      setAllChcsOrgan(data)
    })
  }
  //获取医生团队数据
  const getTeamByOrganId = (value:any)=>{
    $axios({
      url:'/api/getTeamByOrganId',
      method:'post',
      data:{
        organId:value
      }
    }).then((res)=>{
      console.log(res)
      const data = res.data.map((item:any)=>{
        return {value:item.id,label:item.name} 
      })
      setDoctorTeam(data)
    })
  }
  //获取服务包数据
  const getAllChcsService = ()=>{
    $axios({
      url:'/api/getAllChcsService',
      method:'post',
    }).then((res)=>{
      // console.log(res.data.rows)
      const data = res.data.rows.map((item:any)=>{
        return {value:item.name,label:item.name} 
      })
      setAllChcsService(data)
    })
  }

  //获取下拉框选择数据
  const handleChange = (value: string) => {
    console.log(value)
    if(value.length>20){
      getTeamByOrganId(value)
    }
  }
  //搜索
  const onSearch = (value: string) => console.log(value);
  useEffect(()=>{
    getAllChcsOrgan()
    getAllChcsService()
  },[])
  return (
    <div>
        <Space wrap>
        <div className='tips'>
          <span>签约状态</span>
          <Select className='selectBox' defaultValue="请选择"
          style={{ width: 200 }} onChange={handleChange} options={data}/>
        </div>
        <div className='tips'>
          <span>签约机构</span>
          <Select className='selectBox' defaultValue="请选择"
          style={{ width: 200 }} onChange={handleChange} options={AllChcsOrgan}/>
        </div>
        <div className='tips'>
          <span>医生团队</span>
          <Select className='selectBox' defaultValue="请选择"
          style={{ width: 200 }} onChange={handleChange} options={doctorTeam}/>
        </div>
        <div className='tips'>
          <span>服务包</span>
          <Select className='selectBox' defaultValue="请选择"
          style={{ width: 200 }} onChange={handleChange} options={AllChcsService}/>
        </div>
        <div className='tips'>
          <span>选择日期</span>
          <RangePicker className='selectDate' presets={rangePresets} onChange={onRangeChange} />
        </div>
        <div className='.tips'>
          <Search placeholder="请输入关键字" onSearch={onSearch} style={{ width: 200 }} />
        </div>
      </Space>
    </div>
  )
}
